<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="lunbotu.css">
</head>
<body>
    <!-- 轮播图大结构 -->
    <div class="lunbo" id="lunbo">
        <!-- 图片部分 -->
        <ul class="pic" id="pic">
            <li class="current"><img src="images/c1.jpg" alt=""></li>
            <li><img src="images/c2.jpg" alt=""></li>
            <li><img src="images/c3.jpg" alt=""></li>
            <li><img src="images/c4.jpg" alt=""></li>
            <li><img src="images/c5.jpg" alt=""></li>
            <li><img src="images/c6.jpg" alt=""></li>
        </ul>
        <!-- 按钮 -->
        <div class="btn">
            <a href="javascript:;" class="leftbtn" id="left">&lt;</a>
            <a href="javascript:;" class="rightbtn" id="right">&gt;</a>
        </div>
        <!-- 小圆点 -->
        <ol class="sub" id="sub">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </div>
    <script src="common.js"></script>
    <script>
        // 编程思路 ： 信号量编程，通过一个全局变量的信号量，在不同的事件函数中进行信息传递，让我们的
        // 1.获取元素
        var lunbo = my$("lunbo");
        var ul = my$("pic");
        var ulLis = ul.children;
        var left = my$("left");
        var right = my$("right");
        var ol = my$("sub");
        var olLis = ol.children;

        // 全局信号量，存储的是要展示的图片所在 li 的下标
        var idx = 0;
        // 2.右按钮事件，切换到下一张
        right.onclick = rightHandle;
        // 3.左按钮事件，切换到上一张
        left.onclick = function () {
            // 信号量自减
            idx--;
            // 判断 idx 是否是超过了最小的下标，如果是，就相当于从第一张要切换到最后一张
            if (idx < 0) {
                idx = ulLis.length - 1;
            }
            // 调用一个切换函数
            change();
        };
        // 4.下标小圆点事件，点哪个小圆点，对应展示图片
        for (var i = 0; i < olLis.length; i++) {
            // 存储自己的下标
            olLis[i].index = i;
            // 给每个小圆点添加点击事件，然后获取对应下标，赋值给信号量
            olLis[i].onclick = function () {
                // 获取当前点击的元素的下标
                // this.index 
                idx = this.index
                // 调用一个切换函数
                change();
            };
        }
        // 5.轮播图自动播放
        var timer;
        timer = setInterval(rightHandle,1000);
        // 6.鼠标移上轮播图，停止自动轮播
        lunbo.onmouseover = function () {
            clearInterval(timer);
        };
        // 7.鼠标离开轮播图，重新开始自动轮播
        lunbo.onmouseout = function () {
            timer = setInterval(rightHandle,1000);
        };


        // 定义 右按钮事件函数
        function rightHandle() {
            // 信号量自加
            idx++;
            // 判断 idx 是否是超过了最大的下标，如果是，就相当于从最后一张要切换到第一张
            if (idx > ulLis.length - 1) {
                idx = 0;
            }
            // 调用一个切换函数
            change();
        }
        // 定义一个切换函数
        function change() {
            // 排他思想
            // 对应控制
            // 让所有 li 标签清除类名
            for (var i = 0; i < ulLis.length; i++) {
                ulLis[i].className = "";
                olLis[i].className = "";
            }
            // 保留自己
            ulLis[idx].className = "current";
            olLis[idx].className = "current";
        }
    </script>
</body>
</html>